<template>
	<div class="recorder-container">
		<img :src="require('@/assets/icons/录音2.png')" alt="" class="micr" @click="showMicr">

		<div v-if="showMircFlag" class="recording-mask" @touchstart.prevent @touchmove.prevent @touchend.prevent
			@touchend="closeMicr">
			<div class="status">
				<img :src="require('@/assets/icons/a-xialaanniulvse.png')" alt="" class="close-icon" @click="closeMicr">
				<div class="speaktext">
					<div class="record_content" v-if="showRecorder">
						<div class="recording-indicator"></div>
						<div class="recording-indicator"></div>
						<div class="recording-indicator"></div>
						<div class="recording-indicator"></div>
						<div class="recording-indicator"></div>
						<div class="recording-indicator"></div>
						<div class="recording-indicator"></div>
					</div>
					<div v-else="showRecorder">按住说话</div>

				</div>

				<img :src="require('@/assets/icons/录音3.png')" alt="" class="recorder" @touchstart="startRecording"
					@touchend="stopRecording" @touchcancel="stopRecording">

			</div>
		</div>
	</div>
</template>

<script>
	import Recorder from 'js-audio-recorder'
	export default {
		data() {
			return {
				showMircFlag: false,
				showRecorder: false,
				isRecording: false,
				recorder: null,
				playTime: 0,
				timer: null,
				src: null
			};
		},
		created() {
			this.recorder = new Recorder()
		},
		mounted() {
			window.addEventListener('contextmenu', function(e) {
				e.preventDefault();
			});
		},
		methods: {
			showMicr() {
				this.showMircFlag = true
			},
			closeMicr() {
				// 检查点击事件的目标是否是 close-icon 图标或 recording-mask 区域外的其他部分
				if (
					event.target.classList.contains('close-icon') ||
					!event.target.closest('.status')
				) {
					this.showMircFlag = false;
				}
			},
			startRecording() {
				this.isRecording = true;
				this.showRecorder = true;
				this.recorder = new Recorder({
					sampleRate: 16000,
					bitRate: 16
				})
				Recorder.getPermission().then(() => {
					this.recorder.start() // 开始录音
				}, (error) => {
					this.$toast.showMessage(`${error.message}`);
				})

			},
			stopRecording() {
				this.isRecording = false;
				this.showRecorder = false;
				if (this.recorder == null || this.recorder.duration === 0) {
					return false;
				}
				this.recorder.pause() // 暂停录音
				this.timer = null
				const formData = new FormData()
				const blob = this.recorder.getWAVBlob() // 获取wav格式音频数据
				// 此处获取到blob对象后需要设置fileName满足当前项目上传需求，其它项目可直接传把blob作为file塞入formData
				const newbolb = new Blob([blob], {
					type: 'audio/wav'
				})
				const fileOfBlob = new File([newbolb], new Date().getTime() + '.wav')
				formData.append('audioFile', fileOfBlob)
				this.axios.post(`${this.IP}/voice`, formData, {
					headers: {
						'Content-Type': 'multipart/form-data'
					}
				}).then(res => {
					this.$emit('result', res.data.result);
					this.showMircFlag = false;
				}).catch(error => {
					console.log(error);
					// 处理错误...  
				});

			},
		},
	};
</script>

<style scoped>
	.recorder-container {
		z-index: 3;
	}

	.recording-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.micr {
		width: 6vw;
		height: 6vw;
		margin: 1vw;
		opacity: 999;
	}

	.record_content {

		display: flex;
		justify-content: center;
		align-items: center;
	}


	.recording-indicator {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background-color: #00aa00;
		margin: 5px;
		opacity: 0.7;
		animation: indicator-pulse 1s infinite;
	}

	.recording-indicator:nth-child(even) {
		animation-delay: 0.5s;
	}

	@keyframes indicator-pulse {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(0.8);
		}

		100% {
			transform: scale(1);
		}
	}

	.status {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: -4vw;
		width: 99%;
		height: 35%;
		border-top-left-radius: 6vw;
		border-top-right-radius: 6vw;
		/* 左上和右上圆角 */
		font-size: 48px;
		padding: 1vw;
		margin: 1vw;
		color: #dfdfdf;
		background-color: white;
		opacity: 999;
	}

	.close-icon {
		margin-top: -10vw;
		width: 8vw;
		height: 8vw;
	}

	.speaktext {
		margin-top: 14vw;
		color: #d5d5d5;
	}

	.recorder {
		position: relative;
		width: 25vw;
		height: 25vw;
		margin-top: 2vw;

	}
</style>